<template>
    <div class="app-container" ref="content">
        <el-row :gutter="10">
            <el-col :span="12" :offset="6">
                <div style="text-align: center;padding: 10px">《{{alarmRecordInfo.title}}》-详情信息</div>
                <el-form :model="alarmRecordInfo" ref="fireInfoInfo" label-width="100px">
                    <div style="width: 100%;height: 400px;margin-bottom: 40px">
                        <video :src="alarmRecordInfo.videoUrl"  width="100%" height="400px" controls autoplay></video>
                        <div style="text-align: center">
                            报警视频
                        </div>
                    </div>
                    <div style="text-align: center" v-if="alarmRecordInfo.handleStatus==0">
                        <el-button type="danger" @click="dialogVisible=true">确认火情</el-button>
                        <el-button type="warning" @click="misstateFire">误报火情</el-button>
                    </div>
                    <el-dialog
                            title="温馨提示"
                            :visible.sync="dialogVisible"
                            width="30%">
                        <div style="text-align: center;margin-bottom: 20px">
                            请选择视频中火情发生区域进行火情通知
                        </div>
                        <el-form :model="fireForm" label-width="100px" ref="fireForm" :rules="fireFormRules">
                            <el-form-item label="着火区域" prop="regionId" required>
                                <el-select v-model="fireForm.regionId" placeholder="请选择着火区域" style="width: 100%">
                                    <el-option
                                            v-for="item in regionList"
                                            :key="item.ucId"
                                            :label="item.name"
                                            :value="item.ucId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div style="text-align: right">
                            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
                            <el-button type="danger" @click="confirmFire">确认</el-button>
                        </div>
                    </el-dialog>
                    <el-form-item label="报警名称:" prop="title">
                        {{ alarmRecordInfo.title }}
                    </el-form-item>
                    <el-form-item label="上报人:" prop="reportPersonName">
                        {{ alarmRecordInfo.reportPersonName}}
                    </el-form-item>
                    <el-form-item label="上报时间:" prop="reportTime">
                        {{ alarmRecordInfo.reportTime |dateFormat }}
                    </el-form-item>
                    <el-form-item label="关联区域:" prop="regionName">
                        {{ alarmRecordInfo.regionName ||"暂无区域关联"}}
                    </el-form-item>
                    <el-form-item label="地点描述:" prop="addressDescription">
                    {{ alarmRecordInfo.addressDescription}}
                    </el-form-item>
                    <el-form-item label="处理状态:" prop="handleStatus">
                        {{ alarmRecordInfo.handleStatus |alarmStatus}}
                    </el-form-item>
                    <el-form-item label="处理意见:" prop="handleOpinion">
                        {{ alarmRecordInfo.handleOpinion }}
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {confirmFire, getInAlarmRecordVo, misstateFire} from "@/api/alarmRecord";
import {getRegionList} from "@/api/enterprise";

export default {
    name: "alarmRecordInfo",
    data(){
        return{
          alarmRecordInfo:{},
          regionList:[],
          dialogVisible:false,
          fireForm:{
              id:0,
              regionId:''
          },
          fireFormRules:{
              regionId: [{required: true, message: '火情区域不能为空', trigger: 'change'}],
          }
        }
    },
    created() {
        this.$nextTick(() => {
            this.getInAlarmRecordVo(this.$route.params.ucId)
        });
        this.getRegionList()
    },
    methods:{
      getInAlarmRecordVo(val){
            //获取火情信息数据
            let loadingInstance = this.$loading({
                target:this.$refs.content,
                text:'数据加载中'
            });
          getInAlarmRecordVo({ucId:val}).then(res=>{
                console.log(res)
                this.alarmRecordInfo = res.data
                this.fireForm.id = res.data.id
                this.fireForm.ucId = res.data.ucId
                loadingInstance.close()
                this.$notify.success({
                    title: '成功',
                    message: "获取报警记录信息成功"
                })
            }).catch(error=>{
                console.log(error)
                loadingInstance.close()
                this.$notify.error({
                    title: '失败',
                    message: "获取报警记录信息失败"
                })
            })
        },
        misstateFire(){
            this.$confirm('管理员你好，你确定本次上报为误报火情吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                misstateFire(this.alarmRecordInfo).then(res=>{
                    this.getInAlarmRecordVo(this.$route.params.ucId)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消成功'
                });
            });
        },
        //获取本企业的区域信息
        getRegionList(){
            getRegionList({}).then(res=>{
                this.regionList = res.data
            })
        },
        confirmFire(){
            this.$confirm('管理员你好，你是否确认本次火情,确认将给所有人发送火情通知?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                confirmFire(this.fireForm).then(res=>{
                    this.$notify.success({
                        title: '成功',
                        message: "确认火情并发布消息成功"
                    })
                    this.getInAlarmRecordVo(this.$route.params.ucId)
                    this.dialogVisible = false
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消成功'
                });
            });
        }

    }

}
</script>
